<template>
  <div class="home" v-loading:[span()]="loading">
    <div style="width: 100%;background: #ccc;">
      <MyHeader title="Great Components">
        <template slot="iconTitle">
          <FunnyWords words="hello! Great Components"></FunnyWords>
          <PerlinNoise></PerlinNoise>
        </template>
        <template slot="list">
          <ul>
            <ol @click="getInfo">1</ol>
            <ol
              v-for="item in routes"
              :key="item.path"
              @click="$router.push(item.path)">
              {{item.name}}
            </ol>
            <!-- <ol @click="$router.push('/split')">分裂组件</ol>
            <ol @click="$router.push('/pieBarChart')">饼柱图</ol>
            <ol @click="$router.push('/maze')">迷宫</ol> -->
          </ul>
        </template>
        <template slot="tool"></template>
      </MyHeader>
    </div>
    <div style="height: 40px;">
      <Bread :datas="datas" :current="current" @nodeClicked="nodeClicked">
        <template slot="startWith">Hello</template>
        <template slot="splitWith">/</template>
      </Bread>
    </div>
    <div style="height: calc(100% - 93px);padding: 20px;box-sizing: border-box;overflow-y: auto;">
      <div style="display: flex;flex-flow: row nowrap;">
        <div style="flex: 1;">
          <Collapse :title="'滑块'">
            <Slider :values="vals" @value-change="values => {vals = values;toValue = values[0]}"></Slider><br/>
            跳转<input type="text" v-model.number="toValue" @blur="handleBlur"/>
          </Collapse>
          <Collapse :title="'百度热点'">
            <TextView></TextView>
          </Collapse>
          <Collapse :title="'日历'">
            <div style="width: 300px;height: 270px;">
              <Calendar :currentMounth="calendarData"></Calendar>
            </div>
          </Collapse>
          <Collapse :title="'预览'">
            <div style="display: flex;justify-content: space-between;">
              <Preview type="img" title="预览图片"></Preview>
              <Preview type="doc" title="预览文档"></Preview>
              <Preview type="xls" title="预览表格"></Preview>
              <Preview type="video" title="预览视频"></Preview>
              <Preview type="pdf" title="预览pdf"></Preview>
            </div>
          </Collapse>
          <Collapse :title="'裂变组件'">
            <SplitBox style="border: 1px solid #333"></SplitBox>
          </Collapse>
          <Collapse :title="'ECharts'">
            <div style="height: 200px;width: 300px;">
              <ECharts :option="options"></ECharts>
            </div>
          </Collapse>
        </div>
        <div style="flex: 0 0 auto;width: 315px;padding: 15px;">
          <div class="scroll-box" style="display: inline-block;width: 285px;height: calc(100% - 130px);margin-bottom: 50px;position: fixed;top: 110px;right: 20px;">
            <ScrollBoard v-if="height" :datas="datas2" :lineHeight="69" :height="height" :background="'#eee'" itemColor="#fff">
              <template v-slot="{item}">
                <div class="scroll-style" v-loading:[span(item.area)]="item.loading">
                  <div class="rank" :style="`background: ${item.rank === 1 ? '#F4D2D2' : item.rank === 2 ? '#FFEECA' : item.rank === 3 ? '#D2D7FA' : ''};`">{{item.rank}}</div>
                  <div v-scroll-show-all="90" class="area">{{item.area}}</div>
                  <div class="number">{{item.number}}头</div>
                  <div class="percent">{{item.percent}}分之一</div>
                  <div class="line">
                    <div :style="`width: ${item.number * 2}%`"></div>
                  </div>
                </div>
              </template>
            </ScrollBoard>
          </div>
        </div>
      </div>
      
    </div>
    <Dialog :isShow.sync="isShowInfo" :title="'告警详情'" :width="'1800px'" top="12vh">
      <div style="height: 600px;padding: 10px;">
        <GantContainer :list="scheduleData"></GantContainer>
      </div>
      <template slot="foot" slot-scope="{close}">
        <button @click="close" style="padding: 0 32px;">取消</button>
        <button type="primary" style="padding: 0 32px;">确定</button>
      </template>
    </Dialog>
  </div>
</template>

<script>
import MyPromise from '@/scripts/myPromise'
import { list } from '@/components/Gant/config'
import GantContainer from '@/components/Gant/GantContainer'
export default {
  name: 'Home',
  components: { GantContainer },
  data () {
    return {
      scheduleData: list,
      toValue: null,
      vals: [70, 76],
      loading: false,
      position: 'right',
      datas: [
        {title: '页面1', id: 1},
        {title: '页面2', id: 2},
        {title: '页面3', id: 3},
        {title: '页面4', id: 4},
      ],
      current: {
        title: '页面4', id: 4
      },
      height: 0,
      datas2: [],
      calendarData: [{
        date: new Date()
      }],
      isShowInfo: false,
      options: {
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line'
          }
        ]
      },
    }
  },
  async mounted () {
    window.MyPromise = MyPromise
    let a = new MyPromise((resolve, reject) => {
      setTimeout(() => {
        let data = [
          { rank: 1, area: '几江街镇', number: 23, percent: 23, loading: true },
          { rank: 2, area: '究极无敌超长名字的李市镇', number: 20, percent: 14, loading: false },
          { rank: 3, area: '广兴镇', number: 18, percent: 12, loading: false },
          { rank: 4, area: '四面山镇', number: 16, percent: 12, loading: true },
          { rank: 5, area: '支坪镇', number: 15, percent: 12, loading: false },
          { rank: 6, area: '石蟆镇', number: 12, percent: 12, loading: true },
          { rank: 7, area: '白沙镇', number: 10, percent: 12, loading: true },
        ]
        resolve(data)
      },50)
    })
    a.then((res)=> {
      this.height = 300
      this.datas2 = res
      console.log('1', res)
    }).then((res)=> {
      console.log('2', res)
    })
  },
  methods: {
    handleBlur () {
      if ( typeof this.toValue === 'number' && !isNaN(this.toValue)) {
        this.$set(this.vals, 0, this.toValue)
      }
    },
    nodeClicked (item) {
      console.log(item)
    },
    
    span(title="Great Components") {
      let icon = document.createElement('span')
      icon.classList.add('icon')

      let span1 = document.createElement('span')
      span1.classList.add('font1')
      span1.innerHTML = title

      let span2 = document.createElement('span')
      span2.classList.add('font2')
      span2.innerHTML = '未准备就绪'

      return [icon, span1, span2]
    },
    getInfo () {
      this.isShowInfo = true
    },
  },
  computed: {
    routes() {
      return this.$router?.options?.routes ?? []
    }
  },
}
</script>

<style lang="less">
.home {
  width: 100%;
  height: 100%;
  .icon {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    background: url('') no-repeat center center;
    background-size:contain;
    animation:turn 2s linear infinite;
  }
  @keyframes turn{
    0%{-webkit-transform:rotate(0deg);}
    25%{-webkit-transform:rotate(90deg);}
    50%{-webkit-transform:rotate(180deg);}
    75%{-webkit-transform:rotate(270deg);}
    100%{-webkit-transform:rotate(360deg);}
  }
  .font1 {
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    color: #fff;
  }
  .font2 {
    display: inline-block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    justify-content: center;
    font-size: 14px;
    color: #fff;
  }
}
ul {
  display: inline-block;
  ol {
    display: inline-block;
    list-style: none;
    cursor: pointer;
  }
}
.scroll-style {
  height: 100%;
  position: relative;
  .rank {
    position:absolute;
    left: 0;
    top: 18px;
    display: inline-block;
    width: 37px;
    height: 37px;
    line-height: 37px;
    background: #EDEEF3;
    border-radius: 50%;
    font-size: 20px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #6170A0;
    letter-spacing: 2px;
    text-align: center;
  }
  .area {
    position:absolute;
    left: 57px;
    top: 15px;
    height: 22px;
    line-height: 22px;
    width: 200px;
    display: inline-block;
    font-size: 16px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #616579;
    letter-spacing: 2px;
  }
  .number {
    position:absolute;
    right: 0;
    top: 24px;
    display: inline-block;
    height: 25px;
    line-height: 25px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #000000;
    letter-spacing: 2px;
  }
  .percent {
    position:absolute;
    left: 56px;
    top: 39px;
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #A0A8B3;
    letter-spacing: 1px;
  }
  .line {
    position:absolute;
    left: 0;
    right: 0;
    bottom: 0px;
    background: #DBDEE8;
    border-radius: 4px;
    height:2px;
    div {
      display: inline-block;
      position:absolute;
      left: 0;
      bottom: 0px;
      height: 2px;
      background: #4F73EE;
      border-radius: 4px;
    }
  }
}
</style>
